<template>
	<div class="hello">
	  <h1 class="title">涉路施工交通安全影响评价报告</h1>
	  <div class="typeSelect" >
		<el-select v-model="isConstruction" @change="isClearForm" placeholder="请选择">
		  <el-option label="有施工" value="2"></el-option>
		  <el-option label="无施工" value="1"></el-option>
		  <el-option label="匝道" value="3"></el-option>
		  <el-option label="一级公路" value="6"></el-option>
		  <el-option label="二级公路" value="4"></el-option>
		  <el-option label="三级公路" value="5"></el-option>
		  
		</el-select>
	  </div>
	  <div class="typeSelect">
		<el-select v-model="typeSelect" placeholder="请选择">
		  <el-option label="标准" value="2"></el-option>
		  <el-option label="对比" value="1"></el-option>
		</el-select>
	  </div>
	  <!-- <el-upload
				:action="193.168/file/upload"
				:on-success="handleAvatarSuccess"
				multiple
				:file-list="fileList"
				list-type="picture-card"
				:on-remove="handleRemove"
			  >
				<i class="el-icon-camera"></i>
			  </el-upload> -->
	  <div class="content">
		<el-form ref="form" :model="form" label-width="150px">
		  <el-row>
			<el-col :span="11">
			  <el-form-item label="小客车">
				<el-input v-model="form.minibusAbsoluteNum"></el-input>
			  </el-form-item>
			</el-col>
			<el-col :span="11">
			  <el-form-item label="中型车">
				<el-input v-model="form.middleCarAbsoluteNum"></el-input>
			  </el-form-item>
			</el-col>
		  </el-row>
		  <el-row>
			
			<el-col :span="11">
			  <el-form-item label="大型车">
				<el-input v-model="form.largeCarAbsoluteNum"></el-input>
			  </el-form-item>
			</el-col>
			<el-col :span="11">
			  <el-form-item label="汽车列车">
				<el-input v-model="form.automobileTrainAbsoluteNum"></el-input>
			  </el-form-item>
			</el-col>
		  </el-row>
		  <el-row>
			<el-col :span="11">
			  <el-form-item label="车道数N">
				<el-input v-model="form.lanesNum"></el-input>
			  </el-form-item>
			</el-col>
			<el-col :span="11">
			  <el-form-item label="设计速度">
				<el-select
				  v-model="form.designSpeed"
				  placeholder="请选择限速"
				  @change="getSeepList"
				>
				  <template v-if="isConstruction == '5'">
					<el-option label="40" value="40"></el-option>
					<el-option label="30" value="30"></el-option>
				  </template>
				  <template v-if="isConstruction == '4'">
					<el-option label="40" value="40"></el-option>
					<el-option label="60" value="60"></el-option>
					<el-option label="80" value="80"></el-option>
				  </template>
				  <template v-if="isConstruction == '1' || isConstruction == '2'">
					<el-option label="80" value="80"></el-option>
					<el-option label="100" value="100"></el-option>
					<el-option label="120" value="120"></el-option>
				  </template>
				  <template v-if="isConstruction == '6'">
					<el-option label="60" value="60"></el-option>
					<el-option label="80" value="80"></el-option>
					<el-option label="100" value="100"></el-option>
				   
				  </template>
				  <template v-if="isConstruction == '3'">
					<el-option label="30" value="30"></el-option>
					<el-option label="35" value="35"></el-option>
					<el-option label="40" value="40"></el-option>
					<el-option label="50" value="50"></el-option>
					<el-option label="60" value="60"></el-option>
					<el-option label="70" value="70"></el-option>
					<el-option label="80" value="80"></el-option>
				  </template>
				</el-select>
			  </el-form-item>
			</el-col>
		  </el-row>
  
		  <el-row v-if="isConstruction == 2">
			<el-col :span="11">
			  <el-form-item label="限速值">
				<el-select
				  v-model="form.restrictSpeed"
				  placeholder="请选择限速"
				  @change="getLaneWidthList()"
				>
				  <el-option
					v-for="item in restrictSpeedList"
					:key="item.restrictSpeed"
					:label="item.restrictSpeed"
					:value="item.restrictSpeed"
				  ></el-option>
				</el-select>
			  </el-form-item>
			</el-col>
			<el-col :span="11">
			  <el-form-item label="预留行车宽度">
				<el-select
				  v-model="form.reservedLaneWidth"
				  placeholder="请选择限速"
				>
				  <el-option
					v-for="item in reservedLaneWidthList"
					:key="item.reservedLaneWidth"
					:label="item.reservedLaneWidth"
					:value="item.reservedLaneWidth"
				  ></el-option>
				</el-select>
			  </el-form-item>
			</el-col>
		  </el-row>
		  <el-row v-if="isConstruction == 2">
			<el-col :span="11">
			  <el-form-item label="上坡">
				<div style="display: flex">
				  <el-input v-model="form.uphill"></el-input>
				  <span style="padding: 0 10px">%</span>
				</div>
			  </el-form-item>
			</el-col>
			<el-col :span="11">
			  <el-form-item label="下坡">
				<div style="display: flex">
				  <el-input v-model="form.downhill"></el-input>
				  <span style="padding: 0 10px">%</span>
				</div>
			  </el-form-item>
			</el-col>
		  </el-row>
		  <el-row>
			<el-col :span="11">
			  <el-form-item label="C未来">
				<div style="display: flex">
				  <el-input v-model="form.forecastPercent"></el-input>
				  <span style="padding: 0 10px">%</span>
				</div>
			  </el-form-item>
			</el-col>
			<el-col :span="11">
			  <el-form-item label="修正系数Fp">
				<el-select
				  v-model="form.driverAmendFactor"
				  placeholder="请选择修正系数"
				>
				  <el-option label="0.95" value="0.95"></el-option>
				  <el-option label="0.96" value="0.96"></el-option>
				  <el-option label="0.97" value="0.97"></el-option>
				  <el-option label="0.98" value="0.98"></el-option>
				  <el-option label="0.99" value="0.99"></el-option>
				  <el-option label="1" value="1"></el-option>
				</el-select>
			  </el-form-item>
			</el-col>
		  </el-row>
		  <el-row>
			<el-col :span="11">
			  <el-form-item label="路侧干扰系数Ff">
				<el-select
				  v-model="form.amendFactor"
				  placeholder="请选择干扰系数"
				>
				  <el-option label="1" value="1"></el-option>
				  <el-option label="2" value="2"></el-option>
				  <el-option label="3" value="3"></el-option>
				  <el-option label="4" value="4"></el-option>
				  <el-option label="5" value="5"></el-option>
				</el-select>
			  </el-form-item>
			</el-col>
			<el-col :span="11">
			  <el-form-item label="公路位置">
				<el-select v-model="form.roadTypeId" placeholder="请选择公路位置">
				  <el-option label="近郊高速华北" value="1"></el-option>
				  <el-option label="城间高速华北" value="2"></el-option>
				  <el-option label="近郊高速东北" value="3"></el-option>
				  <el-option label="城间高速东北" value="4"></el-option>
				  <el-option label="近郊高速华东" value="5"></el-option>
				  <el-option label="城间高速华东" value="6"></el-option>
				  <el-option label="近郊高速中南" value="7"></el-option>
				  <el-option label="城间高速中南" value="8"></el-option>
				  <el-option label="近郊高速西南" value="9"></el-option>
				  <el-option label="城间高速西南" value="10"></el-option>
				  <el-option label="近郊高速西北" value="11"></el-option>
				  <el-option label="城间高速西北" value="12"></el-option>
				</el-select>
			  </el-form-item>
			</el-col>
		  </el-row>
		  <el-row v-if="isConstruction == 2">
			<el-col :span="11">
			  <el-form-item label="摩阻系数">
				<el-select
				  v-model="form.frictionCoefficient"
				  placeholder="请选择摩阻系数"
				>
				  <el-option label="0.29" value="0.29"></el-option>
				  <el-option label="0.30" value="0.30"></el-option>
				  <el-option label="0.31" value="0.31"></el-option>
				  <el-option label="0.32" value="0.32"></el-option>
				  <el-option label="0.33" value="0.33"></el-option>
				  <el-option label="0.34" value="0.34"></el-option>
				  <el-option label="0.35" value="0.35"></el-option>
				  <el-option label="0.36" value="0.36"></el-option>
				  <el-option label="0.37" value="0.37"></el-option>
				  <el-option label="0.38" value="0.38"></el-option>
				  <el-option label="0.39" value="0.39"></el-option>
				  <el-option label="0.40" value="0.40"></el-option>
				  <el-option label="0.41" value="0.41"></el-option>
				  <el-option label="0.42" value="0.42"></el-option>
				  <el-option label="0.43" value="0.43"></el-option>
				  <el-option label="0.44" value="0.44"></el-option>
				</el-select>
			  </el-form-item>
			</el-col>
			<el-col :span="11">
			  <el-form-item label="车道形式">
				<el-select
				  v-model="form.lanePattern"
				  placeholder="请选择车道形式"
				>
				  <el-option label="双向四车道" value="1"></el-option>
				  <el-option label="双向六车道" value="2"></el-option>
				</el-select>
			  </el-form-item>
			</el-col>
		  </el-row>
		  <el-row v-if="isConstruction == 2">
			<el-col :span="11">
			  <el-form-item label="高速公路最小警告区长度">
				<el-input v-model="form.alarmWidth"></el-input>
			  </el-form-item>
			</el-col>
			<el-col :span="11">
			  <el-form-item label="纵向缓冲区最小长度">
				<el-input v-model="form.bufferWidth"></el-input>
			  </el-form-item>
			</el-col>
		  </el-row>
		  <el-row v-if="isConstruction == 2">
			<el-col :span="11">
			  <el-form-item label="封闭车道上游过渡区最小长度">
				<el-input v-model="form.interimWidth"></el-input>
			  </el-form-item>
			</el-col>
			<!-- <el-col :span="11">
						  <el-form-item label="封闭车道上游过渡区最小长度">
							  <el-input v-model="form.automobileTrainAbsoluteNum"></el-input>
						  </el-form-item>
					  </el-col> -->
		  </el-row>
		  <el-row
			v-if="
			  isConstruction == 3 ||
			  isConstruction == '4' ||
			  isConstruction == '5'
			"
		  >
			<el-col :span="11">
			  <el-form-item label="车道宽度">
				<el-select
				  v-model="form.laneWidth"
				  placeholder="请选择车道宽度"
				  @change="getShoulderWidth()"
				>
				  <el-option
					v-for="item in laneWidthList"
					:key="item.laneWidth"
					:label="item.laneWidth"
					:value="item.laneWidth"
				  ></el-option>
				</el-select>
			  </el-form-item>
			</el-col>
			<el-col :span="11">
			  <el-form-item label="路肩宽度">
				<el-select
				  v-model="form.roadShoulderWidth"
				  placeholder="请选择路肩宽度"
				>
				  <el-option
					v-for="item in shoulderWidthList"
					:key="item.roadShoulderWidth"
					:label="item.roadShoulderWidth"
					:value="item.roadShoulderWidth"
				  ></el-option>
				</el-select>
			  </el-form-item>
			</el-col>
		  </el-row>
		  <el-row
			v-if="
			  isConstruction == 3 ||
			  isConstruction == '4' ||
			  isConstruction == '5'
			"
		  >
			<el-col :span="11">
			  <el-form-item label="方向分布">
				<el-select
				  v-model="form.directionDistribute"
				  placeholder="请选择方向分布"
				>
				  <el-option
					v-for="item in directionalDistributionList"
					:key="item.directionDistribute"
					:label="item.directionDistribute"
					:value="item.directionDistribute"
				  ></el-option>
				</el-select>
			  </el-form-item>
			</el-col>
		  </el-row>
		  <template v-if="typeSelect == 1">
			<p style="height: 1px; background: #ccc"></p>
			<el-row>
			  <el-col :span="11">
				<el-form-item label="小客车">
				  <el-input v-model="form.minibusAbsoluteNumCompare"></el-input>
				</el-form-item>
			  </el-col>
			  <el-col :span="11">
				<el-form-item label="中型车">
				  <el-input v-model="form.middleCarAbsoluteNumCompare"></el-input>
				</el-form-item>
			  </el-col>
			</el-row>
			<el-row>
			  <el-col :span="11">
				<el-form-item label="大型车">
				  <el-input v-model="form.largeCarAbsoluteNumCompare"></el-input>
				</el-form-item>
			  </el-col>
			  <el-col :span="11">
				<el-form-item label="汽车列车">
				  <el-input
					v-model="form.automobileTrainAbsoluteNumCompare"
				  ></el-input>
				</el-form-item>
			  </el-col>
			</el-row>
			<el-row>
			  <el-col :span="11">
				<el-form-item label="车道数N">
				  <el-input v-model="form.lanesNumCompare"></el-input>
				</el-form-item>
			  </el-col>
			  <el-col :span="11">
				<el-form-item label="设计速度">
				  <el-select
					v-model="form.designSpeedCompare"
					placeholder="请选择限速"
					@change="getSeepList"
				  >
				  <template v-if="isConstruction == '5'">
					<el-option label="40" value="40"></el-option>
					<el-option label="30" value="30"></el-option>
				  </template>
				  <template v-if="isConstruction == '4'">
					<el-option label="40" value="40"></el-option>
					<el-option label="60" value="60"></el-option>
					<el-option label="80" value="80"></el-option>
				  </template>
				  <template v-if="isConstruction == '1' || isConstruction == '2'">
					<el-option label="80" value="80"></el-option>
					<el-option label="100" value="100"></el-option>
					<el-option label="120" value="120"></el-option>
				  </template>
				  <template v-if="isConstruction == '6'">
					<el-option label="60" value="60"></el-option>
					<el-option label="80" value="80"></el-option>
					<el-option label="100" value="100"></el-option>
				   
				  </template>
				  <template v-if="isConstruction == '3'">
					<el-option label="30" value="30"></el-option>
					<el-option label="35" value="35"></el-option>
					<el-option label="40" value="40"></el-option>
					<el-option label="50" value="50"></el-option>
					<el-option label="60" value="60"></el-option>
					<el-option label="70" value="70"></el-option>
					<el-option label="80" value="80"></el-option>
				  </template>
				  </el-select>
				</el-form-item>
			  </el-col>
			</el-row>
			<el-row v-if="isConstruction == 2">
			  <el-col :span="11">
				<el-form-item label="限速值">
				  <el-select
					v-model="form.restrictSpeedCompare"
					placeholder="请选择限速"
					@change="getLaneWidthList(1)"
				  >
					<el-option
					  v-for="item in restrictSpeedList"
					  :key="item.restrictSpeed"
					  :label="item.restrictSpeed"
					  :value="item.restrictSpeed"
					></el-option>
				  </el-select>
				</el-form-item>
			  </el-col>
			  <el-col :span="11">
				<el-form-item label="预留行车宽度">
				  <el-select
					v-model="form.reservedLaneWidthCompare"
					placeholder="请选择限速"
				  >
					<el-option
					  v-for="item in reservedLaneWidthList"
					  :key="item.reservedLaneWidth"
					  :label="item.reservedLaneWidth"
					  :value="item.reservedLaneWidth"
					></el-option>
				  </el-select>
				</el-form-item>
			  </el-col>
			</el-row>
  
			<el-row>
			  <el-col :span="11">
				<el-form-item label="C未来">
				  <div style="display: flex">
					<el-input v-model="form.forecastPercentCompare"></el-input>
					<span style="padding: 0 10px">%</span>
				  </div>
				</el-form-item>
			  </el-col>
			</el-row>
		  </template>
		  <div class="title">
			<el-button type="primary" @click="onSubmit(2)">立即创建</el-button>
		  </div>
		</el-form>
  
		<div class="imageList" v-if="isImageShow">
		  <div class="imageItem">
			<img src="../assets/1.png" alt="" />
			<span
			  >1/[1+{{ resultData.p1 }}({{ resultData.e1 }}-1)+{{
				resultData.p2
			  }}({{ resultData.e2 }}-1)+{{ resultData.p3 }}({{
				resultData.e3
			  }}-1)]={{ resultData.fhv }}</span
			>
		  </div>
		  <div class="imageItem" v-if="isConstruction=='1'||isConstruction=='2'||isConstruction=='6'">
			<img src="../assets/2.png" alt="" /><span
			  >{{ resultData.mfs }}*{{ resultData.fhv }}*{{ resultData.fp }}*{{
				resultData.ff
			  }}={{ resultData.cd }}</span
			>
		  </div>
		  <div class="imageItem" v-if="isConstruction=='1'||isConstruction=='2'||isConstruction=='6'">
			<img src="../assets/3.png" alt="" /><span
			  >=({{ form.minibusAbsoluteNum }}+{{ form.middleCarAbsoluteNum }}+{{
				form.largeCarAbsoluteNum
			  }}+{{ form.automobileTrainAbsoluteNum }})*{{ resultData.k }}*{{
				resultData.d
			  }}/{{ resultData.n }}/{{ resultData.cd }}={{
				resultData.serviceLevelValue
			  }}</span
			>
		  </div>
		  <div class="imageItem" v-if="isConstruction=='3'||isConstruction=='4'||isConstruction=='5'">
			<img src="../assets/home2.png" alt="" /><span
			  >=({{ form.minibusAbsoluteNum }}+{{ form.middleCarAbsoluteNum }}+{{
				form.largeCarAbsoluteNum
			  }}+{{ form.automobileTrainAbsoluteNum }})*{{ resultData.k }}/{{ resultData.n }}/{{ resultData.cd }}={{
				resultData.serviceLevelValue
			  }}</span
			>
		  </div>
		  <div v-if="isConstruction=='2'">
			S=S1+S2+S3={{ resultData.s1 }}+{{ resultData.s2 }}+{{
			  resultData.s3
			}}={{ resultData.s }}
		  </div>
		  <div style="color: red">
			<span v-if="resultData.alarmWidthWarn">{{
			  resultData.alarmWidthWarn
			}}</span>
			<span v-if="resultData.interimWidthWarn">{{
			  resultData.interimWidthWarn
			}}</span>
			<span v-if="resultData.bufferWidthWarn">{{
			  resultData.bufferWidthWarn
			}}</span>
		  </div>
		  <div class="imageItem" v-if="isConstruction=='3'||isConstruction=='4'||isConstruction=='5'">
			<img src="../assets/home4.png" alt="" />
			<span
			  >={{ resultData.mfs }}*{{ resultData.fhv }}*{{ resultData.fd }}*{{
				resultData.fw
			  }}*{{ resultData.ff }}={{ resultData.cd }}</span
			>
		  </div>
		</div>
		<el-table :data="tableData" border style="width: 100%">
		  <el-table-column prop="vehicleAbsoluteNumName" width="150">
			<template slot-scope="scope" slot="header">
			  <!-- {{ scope.row.vehicleAbsoluteNumName }} -->
			  <div class="headBox">
				<!-- <div class="headerCon1">区域</div>
				<div class="headerCon2">类型</div> -->
				<div class="line"></div>
			  </div>
			</template>
		  </el-table-column>
		  <el-table-column
			:prop="item.prop"
			:label="item.name"
			v-for="(item, index) in tableHead"
			:key="index"
		  >
		  </el-table-column>
		</el-table>
		<h4>服务水平为：{{ resultData.serviceLevel }}</h4>
		<div class="title" v-if="downloadShow">
		  <el-button type="primary" @click="download(2)">表格下载</el-button>
		</div>
		<div
		  class="imageList"
		  style="border-top: 1px solid #ccc"
		  v-if="isImageShow"
		>
		  <div class="imageItem">
			<img src="../assets/1.png" alt="" />
			<span
			  >1/[1+{{ resultData.p1Compare }}({{ resultData.e1Compare }}-1)+{{
				resultData.p2Compare
			  }}({{ resultData.e2Compare }}-1)+{{ resultData.p3Compare }}({{
				resultData.e3Compare
			  }}-1)]={{ resultData.fhvCompare }}</span
			>
		  </div>
		  <div class="imageItem" v-if="isConstruction=='1'||isConstruction=='2'||isConstruction=='6'">
			<img src="../assets/2.png" alt="" /><span
			  >{{ resultData.mfscompare }}*{{ resultData.fhvCompare }}*{{
				resultData.fpCompare
			  }}*{{ resultData.ffCompare }}={{ resultData.cdCompare }}</span
			>
		  </div>
		  <div class="imageItem">
			<img src="../assets/3.png" alt="" /><span
			  >=({{ form.minibusAbsoluteNumCompare }}+{{
				form.middleCarAbsoluteNumCompare
			  }}+{{ form.largeCarAbsoluteNumCompare }}+{{
				form.automobileTrainAbsoluteNumCompare
			  }})*{{ resultData.kcompare }}*{{ resultData.dcompare }}/{{
				resultData.ncompare
			  }}/{{ resultData.cdCompare }}={{
				resultData.serviceLevelValueCompare
			  }}</span
			>
		  </div>
		  <div v-if="isConstruction=='2'">
			S=S1+S2+S3={{ resultData.s1Compare }}+{{ resultData.s2Compare }}+{{
			  resultData.s3Compare
			}}={{ resultData.sCompare }}
		  </div>
		  <div style="color: red">
			<span v-if="resultData.alarmWidthWarnCompare">{{
			  resultData.alarmWidthWarnCompare
			}}</span>
			<span v-if="resultData.interimWidthWarnCompare">{{
			  resultData.interimWidthWarnCompare
			}}</span>
			<span v-if="resultData.bufferWidthWarnCompare">{{
			  resultData.bufferWidthWarnCompare
			}}</span>
		  </div>
		  <div class="imageItem" v-if="isConstruction=='3'||isConstruction=='4'||isConstruction=='5'">
			<img src="../assets/home4.png" alt="" />
			<span
			  >={{ resultData.mfs }}*{{ resultData.fhv }}*{{ resultData.fd }}*{{
				resultData.fw
			  }}*{{ resultData.ff }}={{ resultData.cd }}</span
			>
		  </div>
		</div>
		
		<el-table :data="tableDataCompare" border style="width: 100%">
		  <el-table-column prop="vehicleAbsoluteNumName" width="150">
			<template slot-scope="scope" slot="header">
			  <!-- {{ scope.row.vehicleAbsoluteNumName }} -->
			  <div class="headBox">
				<!-- <div class="headerCon1">区域</div>
				<div class="headerCon2">类型</div> -->
				<div class="line"></div>
			  </div>
			</template>
		  </el-table-column>
		  <el-table-column
			:prop="item.prop"
			:label="item.name"
			v-for="(item, index) in tableHead"
			:key="index"
		  >
		  </el-table-column>
		</el-table>
		<h4>服务水平为：{{ resultData.serviceLevelCompare }}</h4>
		<div class="chartsBox">
		  <div id="myBarId"></div>
		  <ul class="num">
			<li>一级服务水平</li>
			<li>二级服务水平</li>
			<li>三级服务水平</li>
			<li>四级服务水平</li>
			<li>五级服务水平</li>
			<li>六级服务水平</li>
		  </ul>
		</div>
  
		<!-- v-show="isImageShow" -->
		<div class="title" v-if="isImageShow">
		  <el-button type="primary" @click="download(1)">对比表格下载</el-button>
		</div>
	  </div>
	  <div v-for="(item,index) in dataList" :key="index">
	  <div>
		<guaue-charts :chartData="guaueData" :id="'guageId'+index" ></guaue-charts>
	  </div>
	  <guaue-charts :chartData="guaueData"></guaue-charts>
	  <pieChartsVue :chart-data="pieData"></pieChartsVue>
	  <barGroup :chartData="barGroupData"></barGroup>
	</div>
	</div>
  </template>
  
  <script>
  import * as echarts from "echarts";
  import guaueCharts from "@/components/guaueCharts.vue";
  import pieChartsVue from "@/components/pieCharts.vue";
  import barGroup from '@/components/barGroup.vue'
  export default {
	name: "home",
	components:{
	  guaueCharts,
	  pieChartsVue,
	  barGroup
	},
	data() {
	  return {
		typeSelect: "2",
		isConstruction: "1",
		isImageShow: false,
		tableData: [],
		tableDataCompare: [],
		tableHead: [
		  { name: "小客车", prop: "minibusAbsoluteNum" },
		  { name: "中客车", prop: "middleCarAbsoluteNum" },
		  { name: "大型车", prop: "largeCarAbsoluteNum" },
		  { name: "汽车列车", prop: "automobileTrainAbsoluteNum" },
		  { name: "绝对数", prop: "absoluteNum" },
		  { name: "当量数", prop: "equivalentNum" },
		],
		shoulderWidthList: [], //路肩宽度
		laneWidthList: [], //车道宽度
		directionalDistributionList: [], //方向分布list
		form: {
		  forecastPercent: "", //c未来
		  amendFactor: "", ///路侧干扰修正系数id
		  driverAmendFactor: "", //驾驶人总体特征修正系数
		  lanesNum: "", //车道数
		  minibusAbsoluteNum: "",
		  middleCarAbsoluteNum: "",
		  largeCarAbsoluteNum: "",
		  automobileTrainAbsoluteNum: "",
		  roadTypeId: "",
		  reservedLaneWidth: "",
		  designSpeed: "", //设计速度
		  restrictSpeed: "", //限速值
		  uphill: "", //上坡
		  downhill: "", //下坡
		  frictionCoefficient: "", //摩阻系数
		  lanePattern: "", //车道形式  1 双向四车道  2 双向六车道
		  creatorId: localStorage.getItem("userId"),
		  alarmWidth: "",
		  interimWidth: "",
		  bufferWidth: "",
		  laneWidth: "", //车道宽度
		  roadShoulderWidth: "", //路肩宽度
		  directionDistribute: "", //方向分布
		  minibusAbsoluteNumCompare: "", //对比小客车绝对数
		  middleCarAbsoluteNumCompare: "", //对比中型车绝对数
		  largeCarAbsoluteNumCompare: "", //对比大型车绝对数
		  automobileTrainAbsoluteNumCompare: "", //对比汽车列车绝对数
		  lanesNumCompare: "", //对比车道数
		  designSpeedCompare: "", //对比设计速度
		  restrictSpeedCompare: "", //对比限制速度
		  reservedLaneWidthCompare: "", //对比预留行车宽度
		  forecastPercentCompare: "",
		},
  
		resultData: {
		  fhv: "",
		  mfs: "",
		  fp: "",
		  ff: "",
		  cd: "",
		  ddhv: "",
		  n: "",
		  k: "",
		  d: "",
		  p1: "",
		  e1: "",
		  p2: "",
		  e2: "",
		  p3: "",
		  e3: "",
		  alarmWidthWarn: "",
		  interimWidthWarn: "",
		  bufferWidthWarn: "",
		},
		contastData: null,
		reservedLaneWidthList: [],
		restrictSpeedList: [],
		downloadShow: false,
		contastDownloadShow: false,
		isContastImageShow: false,
		myChart: null,
		barOption: {
		  xAxis: {
			type: "category",
			axisLabel:{
			  fontSize:20
			},
			// 调整X轴文字方向
			// axisLabel: { interval: 0, rotate: 0 },
			data: ["嘿嘿", "哈哈"],
		  },
		  visualMap: {
			min: 1,
			max: 6,
			dimension: 1,
			orient: "vertical",
			right: 10,
			top: "center",
			// text: ['HIGH', 'LOW'],
			calculable: true,
			inRange: {
			  color: ["green", "orange", "red"],
			},
		  },
		  yAxis: {
			type: "value",
		   
			max: 6,
			min: 0,
			//   axisTick: {
			//     show: true, // 显示y轴刻度
			//     length: 0.35, // 刻度长度
			//     lineStyle: {
			//         color: 'red', // 刻度颜色
			//         width: 2 // 刻度宽度
			//     }
			// },
			splitArea: {
				show: true,
				areaStyle: {
				  color: [
					'rgba(255, 255, 255, 0.1)',
					'rgba(204, 204, 204, 0.1)',
					'rgba(255, 255, 255, 0.1)',
					'rgba(204, 204, 204, 0.1)',
					'rgba(255, 255, 255, 0.1)',
					'rgba(204, 204, 204, 0.1)',
				  ]
				}
			  },
  
			axisLine: {
			  show: true, // 控制x轴线是否显示
			  lineStyle: {
				width: 1, // x轴线宽度
				type: "solid", // x轴线类型，可以是 'solid', 'dashed', 或 'dotted'
			  },
			},
			// 删除 axisLabel 显示刻度
			axisLabel: {
			  show: false,
			},
			// 0.35 0.55 0.75 0.9 1
		  },
		  series: [
			{
			  dataBackground: "green",
			  data: [0, 2],
			  type: "bar",
			  barWidth: "20%",
			  label: {
				show: true,
				position: "top",
				fontSize:20
			  },
			},
		  ],
		},
		guaueData:{
		  data:100
		},   // 仪表盘
		guaueData1:{
		  data:0
		},   // 仪表盘
		pieData:{
		  data:[
		{ value: 1048, name: 'Search Engine' },
		  { value: 735, name: 'Direct' },
		  { value: 580, name: 'Email' },
		  { value: 484, name: 'Union Ads' },
		  { value: 300, name: 'Video Ads' }
		]
		},
		barGroupData:{
		  data:[
		  {
			  name: '故障',
			  type: 'bar',
			  stack: '一班',
			  barWidth: '10%',
			  data: [20, 30,40, 60],
		  },
		  {
			  name: '暂停',
			  type: 'bar',
			  stack: '一班',
			  barWidth: '10%',
			  data: [21, 30,40, 60],
		  },
		  {
			  name: '运行',
			  type: 'bar',
			  stack: '一班',
			  barWidth: '10%',
			  data: [22, 30,40, 60],
		  },
		  {
			  name: '离线',
			  type: 'bar',
			  stack: '一班',
			  barWidth: '10%',
			  data: [23, 30,40, 60],
		  },
		 
	  ]
		}
	  };
	},
	mounted() {
	  this.getRampList();
	  this.myChart = echarts.init(document.getElementById("myBarId"));
  
	  this.myChart.setOption(this.barOption);
	},
	methods: {
	  isClearForm(){
		this.form=this.$options.data().form
	  },
	  getSeepList() {
		this.$http
		  .post("/vehicleBasicInfo/selectDesignSpeedInfoList", {
			designSpeed: this.form.designSpeed,
		  })
		  .then((res) => {
			//   this.form.restrictSpeed = "";
			this.restrictSpeedList = res.data.data;
		  });
	  },
	  getRampList() {
		this.$http.post("/vehicleBasicInfo/selectLaneWidthList").then((res) => {
		  this.laneWidthList = res.data.data;
		});
		this.$http
		  .post("/vehicleBasicInfo/selectDirectionCorrectionFactorInfoList")
		  .then((res) => {
			this.directionalDistributionList = res.data.data;
		  });
	  },
	  getShoulderWidth() {
		this.$http
		  .post("/vehicleBasicInfo/selectRoadShoulderWidthInfoList", {
			laneWidth: this.form.laneWidth,
		  })
		  .then((res) => {
			this.shoulderWidthList = res.data.data;
		  });
	  },
	  getLaneWidthList(val) {
		this.$http
		  .post("/vehicleBasicInfo/selectReservedLaneWidthList", {
			designSpeed: val
			  ? this.form.designSpeedCompare
			  : this.form.designSpeed,
			restrictSpeed: val
			  ? this.form.restrictSpeedCompare
			  : this.form.restrictSpeed,
		  })
		  .then((res) => {
			//   this.form.reservedLaneWidth = "";
			//   this.contastform.reservedLaneWidth = "";
			this.reservedLaneWidthList = res.data.data;
		  });
	  },
  
	  onSubmit(type) {
		this.form.coefficientClass = this.typeSelect;
		this.form.isConstruction = this.isConstruction;
		this.$http
		  .post("/vehicleBasicInfo/SafetyEvaluationCalculation4", this.form)
		  .then((res) => {
			console.log(res);
			if (res.data.success) {
			  this.resultData = res.data.data;
			  this.isImageShow = true;
			  this.downloadShow = true;
			  this.tableData = res.data.data.vehicleInfoList;
			  this.tableDataCompare = res.data.data.vehicleInfoListCompare;
			  this.myChart = echarts.init(document.getElementById("myBarId"));
			  this.barOption.xAxis.data = this.resultData.dateList;
			  // this.barOption.xAxis.data = ['正常','道改后1','道改后2'];
			  console.log(this.setNum(this.resultData.serviceLevelValue));
			  // 0.253   0.357   0.535
			  this.barOption.series[0].data = [
				this.setNum(this.resultData.serviceLevelValue),
				this.setNum(this.resultData.serviceLevelValueCompare),
			   
			  ];
			  this.barOption.series[0].label.formatter = (params) => {
				if (params.value < 1) {
				  if (params.value == 0) {
					return 0;
				  } else {
					return '一级服务水平'+(params.value/(1/0.35));
				  }
				}
				if (params.value > 1 && params.value < 2) {
				  return "二级服务水平"+((params.value-1)/5+0.35).toFixed(3);
				}
				if (params.value > 2 && params.value < 3) {
				  return "三级服务水平"+((params.value-2) /5+0.55).toFixed(3);
				}
				if (params.value > 3 && params.value < 4) {
				  return "四级服务水平"+((params.value-3) /(1/15)/100+0.75).toFixed(3);
				}
				if (params.value > 4 && params.value < 5) {
				  return "五级服务水平"+((params.value-4)/10+0.9).toFixed(3);
				}
				if (params.value > 5) {
				  return "六级服务水平"+(params.value - 5);
				}
				// 自定义显示的内容，例如在数值上加上单位0.35 0.55 0.75 0.9 1
			  };
  
			  // this.resultData.serveList;
			  this.myChart.setOption(this.barOption);
			  this.$message.success(res.data.info);
			} else {
			  this.$message.error(res.data.info);
			}
		  });
	  },
	  setNum(num) {// 0.253   0.357   0.535  0.854     0.967
		if (typeof num === 'number' && !isNaN(num)) {
		  if (num == 0) {
					return 0;
				  }
		  if (num < 0.35) {
			return 1/0.35*num;
		  }
		  if (num > 0.35 && num < 0.55) {
			return 0.05*(num-0.35)*100+1
		  }
		  if (num > 0.55 && num < 0.75) {
			return 2+(1/20)*(num-0.55)*100
		  }
		  if (num > 0.75 && num < 0.9) {
			return 3+(1/15)*(num-0.75)*100
		  }
		  if (num > 0.9 && num < 1) {
			return  4+(1/10)*(num-0.9)*100
			// return 4+(num-0.9)*10;
		  }
		  if (num > 1) {
			return num + 5;
		  }
		}
	  },
	  download(type) {
		let data = this.resultData;
		const fileUrl = type == 2 ? data.docUrl : data.docUrlCompare; // 文件的URL地址
		const link = document.createElement("a");
		link.href = fileUrl;
		link.setAttribute("download", "交通组织方案安全评价报告");
		link.click();
	  },
	},
  };
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
  .chartsBox {
	position: relative;
  }
  .num {
	list-style: none;
  }
  .num :nth-child(1) {
	position: absolute;
	left: 0;
	bottom: 100px;
  }
  .num :nth-child(2) {
	position: absolute;
	left: 0;
	bottom: 185px;
  }
  .num :nth-child(3) {
	position: absolute;
	left: 0;
	bottom: 260px;
  }
  .num :nth-child(4) {
	position: absolute;
	left: 0;
	bottom: 335px;
  }
  .num :nth-child(5) {
	position: absolute;
	left: 0;
	bottom: 410px;
  }
  .num :nth-child(6) {
	position: absolute;
	left: 0;
	bottom: 485px;
  }
  .title {
	text-align: center;
	margin-bottom: 20px;
  }
  .content {
	width: 60%;
	margin: 0 auto;
  }
  
  .el-select {
	width: 100%;
  }
  
  .imageList .imageItem {
	display: flex;
	text-align: left;
	align-items: center;
  }
  
  .imageList img {
	width: 50%;
  }
  .typeSelect {
	width: 300px;
	margin: 0 50px;
  }
  #myBarId {
	height: 600px;
  }
  /deep/.column-custom {
	padding: 0px !important;
  }
  /deep/.el-table--border .el-table__cell:first-child .cell {
	padding: 0px !important;
  }
  /deep/ .el-table .el-table__cell {
	padding: 0px !important;
	height: 50px;
	text-align: center;
  }
  .headBox {
	position: relative;
	height: 75px;
  }
  .headerCon1 {
	position: absolute;
	left: 0;
	bottom: 0;
  }
  .headerCon2 {
	position: absolute;
	right: 0;
	top: 0;
  }
  .line {
	width: 1px;
	height: 165px;
	transform: rotate(-63.5deg); /*这里需要自己调整，根据线的位置*/
	transform-origin: top;
	background-color: #ebeef5;
  }
  </style>